<template>
  <a-modal
    ref='noticeDetail'
    :width='900'
    :visible='visible'
    @cancel='close'
    :footer='null'
  >
    <template slot='title'>
      <center>
        <a-tag color='red'>{{ typeFormat(form.noticeType) }}</a-tag>
        {{ form.noticeTitle }}
      </center>
    </template>
    <div class='notice-detail' v-html='form.noticeContent' v-highlight>
    </div>
  </a-modal>
</template>

<script>
import { getNotice } from '@/api/system/notice'

export default {
  name: 'NoticeDetail',
  components: {},
  props: {
    typeOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      loadingMore: false,
      showLoadingMore: true,
      visible: false,
      form: {}
    }
  },
  methods: {
    /** 修改按钮操作 */
    getNotice(id) {
      const noticeId = id
      getNotice(noticeId).then(response => {
        this.form = response.data
      })
      this.visible = true
    },
    // 关闭模态框
    close() {
      this.visible = false
      this.form = {}
    },
    // 公告类型字典翻译
    typeFormat(noticeType) {
      return this.selectDictLabel(this.typeOptions, noticeType)
    }
  }
}
</script>
<style lang='less' scoped>
.notice-detail {
  /* table 样式 */

  :deep( table ) {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }

  :deep( table td,
    table th ) {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }

  :deep( table th) {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */

  :deep( blockquote) {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */

  :deep( code ) {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }

  :deep( pre code ) {
    display: block;
  }

  /* ul ol 样式 */

  :deep( ul, ol) {
    margin: 10px 0 10px 20px;
  }
}
</style>
